/******************************************************************************
 * [data-render="book"] 相關樣式表
 *
 * - 切換呈現模式：在 [data-render="book"] 上設定 .古版 等
 *****************************************************************************/

[data-render="book"] pre {
  white-space: pre-wrap;
  word-break: break-all;
}

html:not(.直書) [data-render="book"].main img {
  max-width: 100%;
  max-height: 75vh;
  height: auto;
}

html.直書 [data-render="book"].main img {
  max-width: 75vw;
  max-height: 100%;
  width: auto;
}

html:not(.直書) [data-render="book"].main img.字 {
  width: auto;
  height: 1em;
  vertical-align: text-bottom;
}

html.直書 [data-render="book"].main img.字 {
  width: 1em;
  height: auto;
  vertical-align: text-bottom;
}
 
/**
 * dl.元資料：定義典籍的元資料
 *
 * - 原則上用於 <header> 中
 *
 * - 範例：
 *   <header>
 *   <dl class="元資料">
 *   <div><dt>作者</dt><dd>王冰</dd></div>
 *   <div><dt>朝代</dt><dd>唐</dd></div>
 *   ...
 *   </dl>
 *   </header>
 */
[data-render="book"] dl.元資料 {
  display: table;
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
  background-color: #EEF;
  color: #333;
}

html.直書 [data-render="book"] dl.元資料 {
  margin: 0 1em;
  width: initial;
  height: 100%;
}

[data-render="book"] dl.元資料 > div {
  display: table-row;
}

[data-render="book"] dl.元資料 > div > dt,
[data-render="book"] dl.元資料 > div > dd {
  display: table-cell;
  border: 1px solid #ccc;
  padding: .125em;
}

[data-render="book"] dl.元資料 > div > dt {
  width: 10%;
  min-width: 2.5em;
  font-weight: bold;
}

html.直書 [data-render="book"] dl.元資料 > div > dt {
  width: initial;
  min-width: initial;
  height: 10%;
  min-height: 2.5em;
}

[data-render="book"] dl.元資料 > div > dd {
  margin: 0;
}

[data-render="book"] dl.元資料[hidden],
[data-render="book"] dl.元資料 > div[hidden] {
  display: none;
}

/**
 * 古版/今版呈現模式
 */
[data-render="book"].古版.main {
  font-size: 1.5em;
  word-wrap: break-word;
  word-break: break-all;
  line-break: anywhere;
  text-orientation: upright; /* Chromium >= 58, Firefox >= 69 */
}

html:not(.直書) [data-render="book"].古版.main {
  margin-left: 2.25em;
  margin-right: 2.25em;
}

html.直書 [data-render="book"].古版.main {
  margin-top: 2.25em;
  margin-bottom: 1.75em; /* 直書時為視覺平衡考量，上比下多留一點空間 */
}

[data-render="book"].古版.main > header > h1,
[data-render="book"].古版.main > header > h1 {
  border-bottom: double #a2a9b1;
  font-size: 1.33em;
  font-weight: bold;
}

html.直書 [data-render="book"].古版.main > header > h1,
html.直書 [data-render="book"].古版.main > header > h1 {
  border-bottom: none;
  border-left: double #a2a9b1;
}

[data-render="book"].古版.main h1,
[data-render="book"].古版.main h2 {
  border: none;
}

[data-render="book"].古版.main h1,
[data-render="book"].古版.main h2,
[data-render="book"].古版.main h3,
[data-render="book"].古版.main h4,
[data-render="book"].古版.main h5,
[data-render="book"].古版.main h6,
[data-render="book"].古版.main p,
[data-render="book"].古版.main ul,
[data-render="book"].古版.main ol,
[data-render="book"].古版.main figure,
[data-render="book"].古版.main pre {
  margin: 0;
  font-size: 1em;
  font-weight: inherit;
}

/* [data-rev="今版/古版"]：今版/古版專有的內容（在其他版不顯示） */
[data-render="book"].古版 [data-rev="今版"],
[data-render="book"]:not(.古版) [data-rev="古版"] {
  display: none;
}

/**
 * 注、疏、校文呈現模式
 *
 * - 整段或多段的注文應將 span[data-rev="注"] 等包在 div 或 p 外面，
 *   以免在不檢索注文時產生空段落。
 */
[data-render="book"].注-拒絕 span[data-rev="注"],
[data-render="book"].疏-拒絕 span[data-rev="疏"],
[data-render="book"].校-拒絕 span[data-rev="校"] {
  display: none;
}

[data-render="book"]:not(.注-接受):not(.注-拒絕) span[data-rev="注"] {
  color: #966;
}

[data-render="book"]:not(.疏-接受):not(.疏-拒絕) span[data-rev="疏"] {
  color: #66f;
}

[data-render="book"]:not(.校-接受):not(.校-拒絕) span[data-rev="校"] {
  color: #800080;
}

/**
 * 訂文
 *
 * - :not([data-ver]) 定義為修訂版（預設顯示）
 * - [data-ver="*"] 定義為原始文本的文字（預設劃刪除線顯示）
 * - [data-ver]:not([data-ver="*"]) 為其他版本的文字（須進階篩選才顯示）
 */

[data-render="book"] span[data-rev="訂"][data-ver]:not([data-ver="*"]) {
  display: none;
}

[data-render="book"] span[data-rev="訂"][data-ver="*"] {
  text-decoration: line-through;
}

[data-render="book"]:not(.訂-接受):not(.訂-拒絕) span[data-rev="訂"] {
  color: #700070;
}

[data-render="book"].訂-接受 span[data-rev="訂"][data-ver="*"],
[data-render="book"].訂-拒絕 span[data-rev="訂"]:not([data-ver]) {
  display: none;
}

[data-render="book"].訂-拒絕 span[data-rev="訂"][data-ver="*"] {
  text-decoration: unset;
}

/**
 * 一般樣式
 */

/**
 * jc-s 用於隱形文字（網頁看不到，僅用於改善複製文字、搜尋引擎索引、無障礙樹）
 *
 * - 產生器可能會為部分標籤自動填入此標籤。
 * - opacity: 0 作為輔助（對於無法正常支援 font-size: 0 的瀏覽器）。
 * - 不使用 display: none：此屬性會使元素無法複製且從 accessibility tree 移除。
 * - 不使用 visibility: hidden：此屬性會使元素從 accessibility tree 移除。
 *   如有此需要，應另外加上 aria-hidden="true"。
 * - 不使用 position: absolute：有些瀏覽器（如 Firefox）會在複製時加上換行。
 */
jc-s {
  font-size: 0;
  opacity: 0;
}

/**
 * [data-sec="p"]：用於大綱分段
 * div[data-sec="p"]：用於大綱分段並比照 p 格式化，在無法使用之處替代 p
 *
 * - 按 W3C 標準，p 不可嵌套亦不可含有 block 元素
 *
 * - 範例：
 *   <div data-sec="p" data-rev="古版-元素"><!--
 *   --><p data-rev="今版-元素">一小段文本</p><!--
 *   --><p data-rev="今版-元素">一小段文本</p><!--
 *   --><p data-rev="今版-元素">一小段文本</p><!--
 *   --></div>
 */
html:not(.直書) [data-render="book"]:not(.古版).main div[data-sec="p"] {
  margin: 1rem 0;
}

html.直書 [data-render="book"]:not(.古版).main div[data-sec="p"] {
  margin: 0 1rem;
}

[data-render="book"] div.換頁,
[data-render="book"] div.換頁至前,
[data-render="book"] div.換頁至後 {
  visibility: hidden;
}

[data-render="book"] div.換頁 {
  page-break-after: always;
  break-after: page;
}

[data-render="book"] div.換頁至前 {
  page-break-after: left; /* 對於不支援 verso 的瀏覽器，假設是左往右翻 */
  break-after: left;
  page-break-after: verso;
  break-after: verso;
}

[data-render="book"] div.換頁至後 {
  page-break-after: right; /* 對於不支援 verso 的瀏覽器，假設是左往右翻 */
  break-after: right;
  page-break-after: recto;
  break-after: recto;
}

/**
 * 古文夾注
 *
 * - 標準的雙行夾注（割注）是將一字的空間分成左右各一字（約原字 75% 大小），因
 *   現行 CSS 尚無法呈現一行分割為二行的排版，JavaScript 控制則會嚴重影響效能，
 *   暫以置中 50% 大小呈現（以令二小字恰好佔一字之空間）。
 *
 * - 今版以稍小字級加前後括號呈現。
 *
 * - 此類元素不應包在 div 或 p 外面，否則自動加上的括號會跑到段落外面。
 */
[data-render="book"] small.組排小字 {
  font-size: 1em;
}

[data-render="book"]:not(.古版) small.雙行夾注,
[data-render="book"]:not(.古版) small.靠右小字,
[data-render="book"]:not(.古版) small.靠左小字,
[data-render="book"]:not(.古版) small.腳注,
[data-render="book"]:not(.古版) small.旁注 {
  font-size: .8em; /* small 預設 .833em */
}

[data-render="book"].古版 small.雙行夾注,
[data-render="book"].古版 small.腳注,
[data-render="book"].古版 small.旁注 {
  font-size: .5em;
}

[data-render="book"] small.組排小字,
[data-render="book"].古版 small.雙行夾注 > span.行 {
  vertical-align: middle;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
}

[data-render="book"].古版 small.雙行夾注 > span.行 {
  font-size: 2em;
}

html:not(.直書) [data-render="book"] small.組排小字,
html:not(.直書) [data-render="book"].古版 small.雙行夾注 > span.行 {
  height: 2em;
}

html.直書 [data-render="book"] small.組排小字,
html.直書 [data-render="book"].古版 small.雙行夾注 > span.行 {
  width: 2em;
}

[data-render="book"] small.組排小字 > span.右文,
[data-render="book"] small.組排小字 > span.左文,
[data-render="book"].古版 small.雙行夾注 > span.行 > span.右文,
[data-render="book"].古版 small.雙行夾注 > span.行 > span.左文 {
  font-size: .75em;
  line-height: 1.333333em;
}

[data-render="book"].古版 small.組排小字 > span.右文,
[data-render="book"].古版 small.組排小字 > span.左文,
[data-render="book"].古版 small.雙行夾注 > span.行 > span.右文,
[data-render="book"].古版 small.雙行夾注 > span.行 > span.左文 {
  letter-spacing: .333333em;
}

[data-render="book"] small.靠右小字 {
  font-size: .75em;
  vertical-align: super;
}

[data-render="book"].古版 small.靠右小字 {
  vertical-align: top;
  letter-spacing: .333333em;
}

[data-render="book"] small.靠左小字 {
  font-size: .75em;
  vertical-align: sub;
}

[data-render="book"].古版 small.靠左小字 {
  vertical-align: bottom;
  letter-spacing: .333333em;
}

html:not(.直書) [data-render="book"].古版 small.組排小字 > span.右文 a[data-jchanzi] img,
html:not(.直書) [data-render="book"].古版 small.組排小字 > span.左文 a[data-jchanzi] img,
html:not(.直書) [data-render="book"].古版 small.雙行夾注 > span.行 > span.右文 a[data-jchanzi] img,
html:not(.直書) [data-render="book"].古版 small.雙行夾注 > span.行 > span.左文 a[data-jchanzi] img,
html:not(.直書) [data-render="book"].古版 small.靠右小字 a[data-jchanzi] img,
html:not(.直書) [data-render="book"].古版 small.靠左小字 a[data-jchanzi] img {
  padding-right: .333333em;
}

html.直書 [data-render="book"].古版 small.組排小字 > span.右文 a[data-jchanzi] img,
html.直書 [data-render="book"].古版 small.組排小字 > span.左文 a[data-jchanzi] img,
html.直書 [data-render="book"].古版 small.雙行夾注 > span.行 > span.右文 a[data-jchanzi] img,
html.直書 [data-render="book"].古版 small.雙行夾注 > span.行 > span.左文 a[data-jchanzi] img,
html.直書 [data-render="book"].古版 small.靠右小字 a[data-jchanzi] img,
html.直書 [data-render="book"].古版 small.靠左小字 a[data-jchanzi] img {
  padding-bottom: .333333em;
}

[data-render="book"] small.略小字 {
  font-size: .875em;
}

[data-render="book"].古版 small.略小字 {
  letter-spacing: .142857em;
}

html:not(.直書) [data-render="book"].古版 small.略小字 a[data-jchanzi] img {
  padding-right: .142857em;
}

html.直書 [data-render="book"].古版 small.略小字 a[data-jchanzi] img {
  padding-bottom: .142857em;
}

[data-render="book"] small.腳注,
[data-render="book"] aside.眉批 {
  outline: 1px dashed #75e6da;
  background-color: #eff;
}

/**
 * 古文常見樣式
 */
[data-render="book"] b.陰文 {
  font-weight: inherit;
  background: black;
  color: white;
}

[data-render="book"] b.圓角陰文 {
  font-weight: inherit;
  border-radius: .25em;
  background: black;
  color: white;
}

[data-render="book"] b.方外框 {
  font-weight: inherit;
  border: 1px solid;
}

[data-render="book"] b.圓外框 {
  font-weight: inherit;
  border: 1px solid;
  border-radius: .25em;
}

[data-render="book"] b.圓圈 {
  font-weight: inherit;
  border: 1px solid;
  border-radius: .5em;
}

[data-render="book"] b.圓括號 {
  font-weight: inherit;
  border-radius: .25em;
}

html:not(.直書) [data-render="book"] b.圓括號 {
  border-left: 1px solid;
  border-right: 1px solid;
}

html.直書 [data-render="book"] b.圓括號 {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/**
 * 對齊方式
 */
[data-render="book"] .行首對齊 {
  text-align: left;
}

[data-render="book"] .置中對齊 {
  text-align: center;
}

[data-render="book"] .行尾對齊 {
  text-align: right;
}

[data-render="book"] .行首懸浮 {
  float: left;
}

[data-render="book"] .行尾懸浮 {
  float: right;
}

[data-render="book"] .中止懸浮 {
  clear: both;
}

[data-render="book"] .行內區塊 {
  display: inline-block;
}

/* deprecated */
[data-render="book"] img.行首懸浮 {
  float: left;
}

/* deprecated */
[data-render="book"] img.置中區塊 {
  display: block;
  margin: auto;
}

/* deprecated */
[data-render="book"] img.行尾懸浮 {
  float: right;
}

/**
 * 行寬#字、縮進#字、行尾縮進#字、首行縮進#字、首行凸出#字
 *
 * - 主要用於標示古版原文的縮排原貌，多用於 div.古版-元素
 */
html:not(.直書) [data-render="book"] .行寬1字 {
  width: 1em;
}

html.直書 [data-render="book"] .行寬1字 {
  height: 1em;
}

html:not(.直書) [data-render="book"] .行寬5字 {
  width: 5em;
}

html.直書 [data-render="book"] .行寬5字 {
  height: 5em;
}

html:not(.直書) [data-render="book"] .縮進1字 {
  margin-left: 1em;
}

html.直書 [data-render="book"] .縮進1字 {
  margin-top: 1em;
}

html:not(.直書) [data-render="book"] .縮進2字 {
  margin-left: 2em;
}

html.直書 [data-render="book"] .縮進2字 {
  margin-top: 2em;
}

html:not(.直書) [data-render="book"] .縮進3字 {
  margin-left: 3em;
}

html.直書 [data-render="book"] .縮進3字 {
  margin-top: 3em;
}

html:not(.直書) [data-render="book"] .縮進4字 {
  margin-left: 4em;
}

html.直書 [data-render="book"] .縮進4字 {
  margin-top: 4em;
}

html:not(.直書) [data-render="book"] .縮進5字 {
  margin-left: 5em;
}

html.直書 [data-render="book"] .縮進5字 {
  margin-top: 5em;
}

html:not(.直書) [data-render="book"] .行尾縮進2字 {
  margin-right: 2em;
}

html.直書 [data-render="book"] .行尾縮進2字 {
  margin-bottom: 2em;
}

html:not(.直書) [data-render="book"] .行尾縮進6字 {
  margin-right: 6em;
}

html.直書 [data-render="book"] .行尾縮進6字 {
  margin-bottom: 6em;
}

[data-render="book"] .首行縮進4字 {
  text-indent: 4em;
}

[data-render="book"] .首行凸出1字 {
  text-indent: -1em;
}

[data-render="book"] .首行凸出2字 {
  text-indent: -2em;
}

/**
 * ul.隱式列表：以每層縮排一字的方式顯示多層 ul, li
 *
 * - 內部常搭配行內列表使用
 *
 * - 範例：
 *   <ul class="隱式列表">
 *   <li>項目一
 *     <ul>
 *     <li>項目一之一</li>
 *     <li>項目一之二</li>
 *     </ul>
 *   </li>
 *   <li>項目二
 *     <ul>
 *     <li>項目二之一</li>
 *     <li>項目二之二</li>
 *     </ul>
 *   </li>
 *   </ul>
 *
 *   輸出：
 *   項目一
 *     項目一之一
 *     項目一之二
 *   項目二
 *     項目二之一
 *     項目二之二
 */
[data-render="book"] ul.隱式列表 {
  padding: 0;
}

html:not(.直書) [data-render="book"] ul.隱式列表 ul:not([class]) {
  padding-left: 1em;
}

html.直書 [data-render="book"] ul.隱式列表 ul:not([class]) {
  padding-top: 1em;
}

[data-render="book"] ul.隱式列表 > li, ul.隱式列表 ul:not([class]) > li {
  list-style: none;
}

/**
 * ul.行內列表.項寬#字：以每項固定字數的方式排列，寬度不足時整項移至下一行
 *
 * - 其內各 li 尾部宜加一全形空格，以便使用者複製時有空格字元隔開
 *
 * - 範例：
 *   <ul class="行內列表 項寬8字"><li>項目一內容　<li>項目二內容文　<li>...</ul>
 *
 *   輸出：
 *   項目一內容　    項目二內容文　  項目三內容文字　項目四內容文字　
 *   項目五內容文字　項目六內容文字　項目七內容文字比較長一點　
 *   項目八內容文字　項目九內容文字　
 *   ...
 *
 * @TODO: 項目長度超過時，項目寬度無法延伸至整數倍
 */
[data-render="book"] ul.行內列表 {
  padding: 0;
}

[data-render="book"] ul.行內列表 > li {
  display: inline-block;
  list-style: none;
  margin: 0;
}

html:not(.直書) [data-render="book"] ul.項寬5字 > li {
  min-width: 5em;
}

html.直書 [data-render="book"] ul.項寬5字 > li {
  min-height: 5em;
}

html:not(.直書) [data-render="book"] ul.項寬6字 > li {
  min-width: 6em;
}

html.直書 [data-render="book"] ul.項寬6字 > li {
  min-height: 6em;
}

html:not(.直書) [data-render="book"] ul.項寬8字 > li {
  min-width: 8em;
}

html.直書 [data-render="book"] ul.項寬8字 > li {
  min-height: 8em;
}

html:not(.直書) [data-render="book"] ul.項寬9字 > li {
  min-width: 9em;
}

html.直書 [data-render="book"] ul.項寬9字 > li {
  min-height: 9em;
}

html:not(.直書) [data-render="book"] ul.項寬10字 > li {
  min-width: 10em;
}

html.直書 [data-render="book"] ul.項寬10字 > li {
  min-height: 10em;
}

/**
 * 精細排版
 */
[data-render="book"].精細排版.古版 small.組排小字 > span.右文,
[data-render="book"].精細排版.古版 small.組排小字 > span.左文,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.右文,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.左文,
[data-render="book"].精細排版.古版 small.靠右小字,
[data-render="book"].精細排版.古版 small.靠左小字,
[data-render="book"].精細排版.古版 small.略小字 {
  letter-spacing: unset;
}

[data-render="book"].精細排版.古版 small.組排小字 > span.右文 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.組排小字 > span.左文 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.右文 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.左文 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.靠右小字 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.靠左小字 a[data-jchanzi] img,
[data-render="book"].精細排版.古版 small.略小字 a[data-jchanzi] img {
  padding: unset;
}

[data-render="book"].精細排版.古版 small.靠右小字,
[data-render="book"].精細排版.古版 small.靠左小字 {
  line-height: 1.333333;
}

[data-render="book"].精細排版.古版 small.略小字 {
  line-height: 1.142857;
}

[data-render="book"].精細排版.古版 small.組排小字 > span.右文 jc-c,
[data-render="book"].精細排版.古版 small.組排小字 > span.左文 jc-c,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.右文 jc-c,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.左文 jc-c,
[data-render="book"].精細排版.古版 small.靠右小字 jc-c,
[data-render="book"].精細排版.古版 small.靠左小字 jc-c,
[data-render="book"].精細排版.古版 small.略小字 jc-c {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
}

[data-render="book"].精細排版.古版 small.組排小字 > span.右文 jc-c,
[data-render="book"].精細排版.古版 small.組排小字 > span.左文 jc-c,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.右文 jc-c,
[data-render="book"].精細排版.古版 small.雙行夾注 > span.行 > span.左文 jc-c {
  width: 1.3333333em;
  height: 1.3333333em;
  padding: .1666666em;
}

html:not(.直書) [data-render="book"].精細排版.古版 small.靠右小字 jc-c {
  width: 1.3333333em;
  height: 2.6666666em;
  padding: .1666666em .1666666em 1.5em .1666666em;
}

html.直書 [data-render="book"].精細排版.古版 small.靠右小字 jc-c {
  width: 2.6666666em;
  height: 1.3333333em;
  padding: .1666666em .1666666em .1666666em 1.5em;
}

html:not(.直書) [data-render="book"].精細排版.古版 small.靠左小字 jc-c {
  width: 1.3333333em;
  height: 2.6666666em;
  padding: 1.5em .1666666em .1666666em .1666666em;
}

html.直書 [data-render="book"].精細排版.古版 small.靠左小字 jc-c {
  width: 2.6666666em;
  height: 1.3333333em;
  padding: .1666666em 1.5em .1666666em .1666666em;
}

html:not(.直書) [data-render="book"].精細排版.古版 small.略小字 jc-c {
  width: 1.14285714em;
  height: 2.28571428em;
  padding: .64285714em .07142857em;
}

html.直書 [data-render="book"].精細排版.古版 small.略小字 jc-c {
  width: 2.28571428em;
  height: 1.14285714em;
  padding: .07142857em .64285714em;
}
